<template>
  <el-dialog append-to-body title="添加技能" :visible.sync="visible" width="60%" top="5vh" @close="handleClose">
    <avue-crud
      ref="crud"
      :table-loading="loading"
      :data="data"
      :option="tableOption"
      :page.sync="page"
      @on-load="onLoad"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @row-click="rowClick"
      @row-dblclick="rowDbclick"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @select="select"
    >
    </avue-crud>
    <div slot="footer" class="dialog-footer close">
      <el-button size="small" icon="el-icon-circle-close" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit()"><i class="el-icon-circle-plus-outline"></i><span>提 交</span></el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getList as getSkillList } from '@/api/product/skill-list';

export default {
  name: 'addSkillModal',
  props: ['visible'],
  data() {
    return {
      loading: false,
      data: [], //表格数据
      selectedRows: [], //表格选中行数据
      tableOption: {
        height: 'calc(100vh - 480px)',
        calcHeight: 30,
        border: true, //表格外框线是否显示
        stripe: true, //表格是否显示条纹
        header: true, //表格头部是否显示
        index: true, //表格数据序号
        indexLabel: '序号',
        page: true, //表格分页是否显示
        noPageParams: false, // true时不分页时不传参total和pageSize
        addBtn: false, //新增按钮是否显示
        menu: false, //表格操作栏是否显示
        refreshBtn: false, //刷新按钮是否显示
        columnBtn: false, //控制表格列是否显示按钮是否显示
        searchBtn: true,
        searchShowBtn: false,
        searchMenuSpan: 6, //搜索按钮所占宽度
        searchMenuPosition: 'right', //搜索按钮位置
        column: [
          {
            label: '技能类型',
            prop: 'type',
            search: true,
            type: 'select',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            prop: 'code',
            order: 1,
            dicUrl: '/api/blade-system/dict/dictionary?code=skill_type'
          },
          { label: '技能名称', prop: 'name', search: true, type: 'input' },
          { label: '备注', prop: 'remark' }
        ], //表格列配置
        selection: true, //表格是否多选
        reserveSelection: true, //表格是否分页多选
        rowKey: 'id',
        searchShow: true,
        isFilter: false, //是否对数据进行过滤
        query: {},
        subTitle: {
          // 表格顶部展示子标题
          show: false,
          icon: '',
          name: ''
        },
        filterOption: {
          //表格数据过滤
          isFilter: false,
          prop: '',
          data: [] //过滤的数据
        },
        selectOption: {
          isMark: false, //是否标记选择项
          data: [], //标记的数据
          prop: '', //对应列表的属性
          selectedData: []
        }
      }, //表格属性
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      } //表格分页
    };
  },
  methods: {
    onLoad(page, params = {}) {
      console.log(page);
      this.loading = true;
      getSkillList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
    handleClose() {
      // 清空搜索框状态
      this.$emit('close', false);
    },
    handleSubmit() {},
    /**
     * 搜索
     */
    searchChange(params, done) {
      //   this.tableOption.query = { ...this.query, ...params };
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page);
      done();
    },
    /**
     * 搜索重置
     */
    searchReset() {
      //   this.tableOption.query = { ...this.query };
      this.query = {};
      if (this.option.noResetRequest) {
        this.data = [];
        this.page.total = 0;
        return;
      }
      this.onLoad(this.page);
    },
    /**
     * 多选事件
     */
    selectionChange(list) {
      // this.$message.success('选中的数据' + JSON.stringify(list));
      if (!this.selectOption.isMark) {
        this.selectedRows = list;
      }
      if (this.selectOption.isMark && !this.tableOption.page) {
        this.selectedRows = list;
      }
    },
    /**
     * 单击事件
     */
    rowClick(row) {
      if (this.tableOption.selection && !this.selectOption.isMark) {
        this.$refs.crud.toggleRowSelection(row);
      }
    },

    /**
     * 双击事件
     */
    rowDbclick(row) {
      if (!this.option.readonly && this.option.rowSelectionType === 'single') {
        if (this.activeBtn === 'secondBtn') {
          row.partMasterId = row.id;
        }
        this.$emit('getSelectedRows', row, this.titleInfo);
        this.isCommonModalTemplate = false;
      }
    },
    /**
     * 改变当前页
     */
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    /**
     * 改变当前页大小
     */
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    /**
     * 刷新
     */
    refreshChange() {
      this.onLoad(this.page);
    },
    /*
     * 选择或取消当前行时
     */
    select(selection, row) {
      let selectedRows = this._cloneDeep(this.selectedRows);
      if (this.selectOption.isMark && this._get(this.selectOption, 'selectedData', []).length > 0 && this.tableOption.page) {
        this._forEach(selectedRows, (item, idx) => {
          if (this._get(item, this.selectOption.prop, '') === row[this.selectOption.prop]) {
            this._remove(this.selectedRows, (n) => {
              return n[this.selectOption.prop] === row[this.selectOption.prop];
            });
          }
        });

        let flag = selectedRows.every((item) => {
          return item[this.selectOption.prop] !== row[this.selectOption.prop];
        });
        if (flag) {
          this.selectedRows.push(row);
        }
      } else {
        this.selectedRows = selection;
      }
    }
  }
};
</script>
